<template>
  <div class="main">
    <!-- 查询选项模块 -->
    <form action="#" onsubmit="return false">
      <input
        type="text"
        name="nodeName"
        placeholder="搜索"
        v-model="selectData.input"
      />
      <input type="submit" value="搜索" @click="toNew" />
    </form>
    <!-- 查询结果模块 -->
    <div class="result">
      <p>RESULT</p>
      <ul>
        <!-- 查询结果为每一个小li -->
        <li v-for="item in nodeData" :key="item.id" @click="toNodeDetail(item)">
          <NodeLi :nodeData="item" />
        </li>
      </ul>
    </div>
    <!-- 浮动筛选模块 -->
    <div class="float">
      <!-- 笔记筛选模块 -->
      <p>筛选</p>
      <!-- 显示/隐藏按钮 -->
      <div class="pullDown" @click="pullDown">展开/收起</div>
      <!-- 筛选的select框 transition添加动画 -->
      <transition name="selectShow">
        <div v-show="select">
          <!-- 人气框 -->
          <select name="popularity" v-model="selectData.popularity">
            <option value="none" selected disabled hidden>人气</option>
            <option
              v-for="item in selectItem.popularity"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <!-- 排序框 -->
          <select name="order" v-model="selectData.order">
            <option value="none" selected disabled hidden>排序</option>
            <option
              v-for="item in selectItem.order"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <!-- 类别框 -->
          <select name="class" v-model="selectData.nodeClass">
            <option value="none" selected disabled hidden>类别</option>
            <option
              v-for="item in selectItem.class"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <!-- 语言框 -->
          <select name="language" v-model="selectData.language">
            <option value="none" selected disabled hidden>语言</option>
            <option
              v-for="item in selectItem.language"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import NodeLi from "@/components/nodeListValue/NodeLi.vue";
export default {
  data() {
    return {
      select: false, // 控制笔记筛选的显示和隐藏
      nodeData: [], // 搜索到的笔记数据
      // 筛选框内容
      selectData: {
        input: this.$route.query.search,
        popularity: "none",
        order: "none",
        nodeClass: "none",
        language: "none",
      },
      selectItem: {
        // 筛选框选项
        popularity: [
          { id: 1, value: "10", text: "10+" },
          { id: 2, value: "100", text: "100+" },
          { id: 3, value: "1000", text: "1000+" },
        ],
        order: [
          { id: 1, value: "popularity", text: "人气最高" },
          { id: 2, value: "time", text: "时间最近" },
        ],
        class: [
          { id: 1, value: "Study", text: "学习笔记类" },
          { id: 2, value: "Source", text: "项目源码类" },
          { id: 3, value: "Bug", text: "BUG解决类" },
          { id: 4, value: "Curriculum", text: "课程系列类" },
          { id: 5, value: "Function", text: "功能实现类" },
          { id: 6, value: "other", text: "其他" },
        ],
        language: [
          { id: 1, value: "Java", text: "Java" },
          { id: 2, value: "Python", text: "Python" },
          { id: 3, value: "HTML", text: "HTML" },
          { id: 4, value: "JavaScript", text: "JavaScript" },
          { id: 5, value: "Go", text: "Go" },
          { id: 6, value: "PHP", text: "PHP" },
          { id: 7, value: "JSP", text: "JSP" },
          { id: 8, value: "C", text: "C" },
          { id: 9, value: "CSS", text: "CSS" },
          { id: 10, value: "Maven", text: "Maven" },
          { id: 11, value: "MySQL", text: "MySQL" },
          { id: 12, value: "Redis", text: "Redis" },
          { id: 13, value: "Android", text: "Android" },
          { id: 14, value: "XML", text: "XML" },
          { id: 15, value: "Docker", text: "Docker" },
          { id: 16, value: "Ruby", text: "Ruby" },
          { id: 17, value: "Rust", text: "Rust" },
          { id: 18, value: "other", text: "其他" },
        ],
      },
      // 分页展示数据
      page: {
        // 当前页数
        currentPage: 1,
        // 每页大小
        PageSize: 10,
      },
    };
  },
  // 监视属性selectData，用户改变内容，就修改搜索
  methods: {
    // 点击搜索按钮
    toNew() {
      this.$router.push({
        path: "/main/search",
        query: {
          search: this.selectData.input,
        },
      });
      // 重置页数
      this.page.currentPage = 1;
      // 清空搜索框内容
      this.nodeData = [];
      // 执行搜索操作
      this.selectFind();
    },
    // 筛选查找笔记
    selectFind() {
      // 获取搜索框内容
      const input =
        this.selectData.input == "" ? "none" : this.selectData.input;
      // 获取用户在排列框选择的内容
      const order = this.selectData.order;
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/node/selectFind/" +
          input +
          "/" +
          order +
          "/" +
          this.page.currentPage +
          "/" +
          this.page.PageSize,
        data: {
          popularity: this.selectData.popularity * 1,
          className: this.selectData.nodeClass,
          language: this.selectData.language,
        },
      }).then(
        (res) => {
          // 得到的数据添加到数据数组中
          this.aggregateData(res).forEach((element) => {
            this.nodeData.push(element);
          });
          // 当前页数+1
          this.page.currentPage += 1;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 控制筛选按钮的显示与隐藏事件
    pullDown() {
      this.select = !this.select;
    },
    // 控制点击笔记跳转，这里是分页跳转
    toNodeDetail(item) {
      const routeData = this.$router.resolve({
        path: "/nodeDetail",
        query: {
          // 将笔记数据传递给跳转的路由，便于显示对应笔记的内容
          className: item.className,
          id: item.id,
          language: item.language,
          nodename: item.nodename,
          popularity: item.popularity,
          time: item.time,
          username: item.username,
          userId: item.userId,
          description: item.description,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 将后端返回数据[nodes]和[usernames]合并在[nodes]中返回[nodes]
    aggregateData(res) {
      res.data.data.nodes.forEach((element, index) => {
        element["username"] = res.data.data.users[index];
      });
      return res.data.data.nodes;
    },
    // 滚动处理事件
    pageScroll() {
      // 获取滚动距离(当前屏幕最上方距离页面最顶部的距离)
      let scrollTop = document.documentElement.scrollTop;
      // 获取滚动高度(整个HTML高度,页面内容的高度)
      let scrollHeight = document.documentElement.scrollHeight;
      // 获取屏幕高度
      let clientHeight = document.documentElement.clientHeight;
      // 当滚动距离+屏幕高度 >= 内容高度，证明到底，加载新数据
      if (scrollTop + clientHeight >= scrollHeight) {
        // 更新数据
        this.selectFind();
      }
    },
  },
  components: {
    NodeLi,
  },
  // 挂载前生命周期钩子函数,请求后端获得所有笔记数据
  mounted() {
    // 筛选查找笔记
    this.selectFind();
    // 监听页面滚动
    window.onscroll = this.pageScroll;
  },
};
</script>

<style scoped>
/* 主模块 */
.main {
  margin-top: 2%;
  width: 1000px;
  padding-bottom: 30px;
  height: auto;
}

/* 表单选项 */
form {
  display: block;
  width: 95%;
  margin: 10px auto;
  background-color: #20202a;
  border-radius: 30px;
  padding: 10px;
}

input {
  background-color: #20202a;
  border: #39383e 3px solid;
  width: 700px;
  height: 44px;
  display: inline-block;
  color: #fff;
  font-weight: 800;
  outline: none;
  border-radius: 30px;
  text-align: center;
}

input[type="submit"] {
  margin-left: 20px;
  height: 50px;
  width: 200px;
  font-size: large;
  border-color: #2ecc71;
}

input:hover,
input:focus,
select:hover,
.pullDown:hover {
  border-color: #2ecc71;
}

input[type="submit"]:hover {
  background-color: #2ecc71;
}

/* 搜索结果 */
.result {
  width: 95%;
  /*height: 630px;*/
  background-color: #20202a;
  margin: 20px auto;
  border-radius: 30px;
  padding-bottom: 20px;
}
.result > p {
  display: block;
  border-bottom: #55556d 1px solid;
  margin: 0;
  padding: 10px;
}
ul {
  list-style: none;
}
/* 浮动筛选框部分 */
.float {
  height: auto;
  padding-bottom: 20px;
}
.pullDown {
  cursor: pointer;
  line-height: 30px;
  height: 30px;
  background-color: #20202a;
  border: #39383e 3px solid;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  margin: 0 10px;
}
select {
  width: 270px;
  display: block;
  height: 30px;
  background-color: #20202a;
  border: #39383e 2px solid;
  outline: none;
  color: #fff;
  text-align: center;
  margin: 10px auto;
}
p {
  display: inline-block;
  font-size: x-large;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  color: #fff;
  margin-right: 20px;
  margin-left: 20px;
}

/* 动画定义 */
@keyframes selectShow {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

.selectShow-enter-active {
  animation: selectShow 0.5s;
}
.selectShow-leave-active {
  animation: selectShow 0.3s reverse;
}
</style>